<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>投运时间</title>
	<meta name="viewport"  content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="${path}/resource/plugins/bootstrap/css/bootstrap.min.css">
  	<link rel="stylesheet" type="text/css" href="${path}/resource/css/ysrmain.css">
	<link rel="stylesheet" href="${path}/resource/css/gzfx.css">
	<link rel="stylesheet" type="text/css" href="${path}/resource/plugins/date/bootstrap-datetimepicker.min.css" charset="UTF-8">
	<script src="${path}/resource/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script src="${path}/resource/plugins/date/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
	<script src="${path}/resource/plugins/date/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
	
	<script type="text/javascript" src="${path}/resource/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${path}/resource/js/echarts.min.js"></script>

	<script type="text/javascript"></script>
</head>
<body>
	<!-- 头部 -->
	<!-- 开始 -->
	<jsp:include page="../allEquip/top_nav.jsp"></jsp:include>
	<!-- 头部结束 -->
    
    <!-- 右侧内容区域 -->
    <div class="right-content container-fluid ">
    	<div class="row">
    		<!-- 主要图表区域 -->
    		<div class=" right-nav">
	    			<div class="title-name">
	    				<span>变频器投运时间地域分布统计</span>
	    				
	    			</div>
	    			<div class=" right nav-over padding-r-1">
	    				<input onChange="jiekou();" type="text" readonly="readonly" data-link-format="yyyy-mm-dd" data-link-field="dtp_input2" placeholder="请选择开始日期" class="form_date time-input3" id="datetimepicker1" data-date-format="yyyy-mm-dd ">
	    				<span class=" span-date"><span class="glyphicon glyphicon-calendar"></span></span>	
			     		<input onChange="jiekou();" type="text" readonly="readonly" data-link-format="yyyy-mm-dd" data-link-field="dtp_input2" placeholder="请选择结束日期" class="form_date time-input3" id="datetimepicker2" data-date-format="yyyy-mm-dd ">
			     		<span class=" span-date"><span class="glyphicon glyphicon-calendar"></span></span>
			          
			     	</div>
	    	</div>
	    	<div class="content-img ">
	    		<div id="mainEcharts" style="float:left;width: 71%; height: 100%;"></div>
	    		<div style="float:left;width: 28%; height: 100%;">
	    			<div id="rightEcharts1" style="width: 100%; height: 30%; margin-top: 3%;"></div>
	    			<div id="rightEcharts2" style="width: 100%; height: 30%; margin-top: 5%;"></div>
<!-- 					<div id="rightEcharts2title" style="width: 100%; height: 5%; background-color: white; text-align: center;">IN</div> -->
	    			<div id="rightEcharts3" style="width: 100%; height: 30%; margin-top: 5%;"></div>
<!-- 	    			<div id="rightEcharts2title" style="width: 100%; height: 5%; background-color: white; text-align: center;">OUT</div> -->
	    		</div>
	    	</div>
	    </div>
    </div>




	
</body>
<script type="text/javascript">
$(function(){
	$(".img-fbtj").parent().css({"color":"#82d1e8","text-shadow":" 0px 0px 10px #b7d6df"});
	$(".img-fbtj").attr("src",'${path}/resource/images/fbtj2.png')
	$(".img-fbtj").parent().parent().addClass("dl-active");
	$(".img-fbtj").parent().parent().css("padding","5px 0px");
	$(".img-tysj").attr("src","${path}/resource/images/tysj2.png")
	$(".img-tysj").parent().css({"color":"#82d1e8","text-shadow":" 0px 0px 10px #b7d6df"});
	$(".img-tysj").removeClass('padding-1');
	$(".span-date").click(function(){
		$(this).prev().focus();
	})
	jiekou();
	
	devCountByMonth();
})
	$('.form_date').datetimepicker({
	    language:  'zh-CN',
	    weekStart: 1,
	    todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		minView: 2,
		forceParse: 0,
		maxView:4
	});

	//测试数据
	var testdata = [
        {value:335, name:'珠海'},
        {value:310, name:'广州'},
        {value:234, name:'上海'},
        {value:135, name:'北京'},
        {value:1548, name:'其他'}
    ];
	var testlegend = ['珠海','广州','上海','北京','其他'];

function jiekou() {
	$.ajax({
		type : 'POST',
		url : '<%=path%>/manage/chtdatupdate',
		data : {
			actval1 : $('#datetimepicker1').val(),
			actval2 : $('#datetimepicker2').val()
		},
		dataType : 'json',
		async : false,
		success : function(result) {
			console.log(result);
			if(result.status == 'OK') {
				var data = [];
				var legend = [];
				var chtdatupdate = eval("(" + result.data.chtdatupdate + ")");
				if(result.data.chtdatupdate == "[null]") {
					initMainEcharts([], []);
				} else {
					$.each(chtdatupdate, function(i) {
						data.push({
							name : chtdatupdate[i].cityArea,
							value : chtdatupdate[i].count
						});
						legend.push(chtdatupdate[i].cityArea);
					});
					initMainEcharts(legend, data);
				}
			} else {
				initMainEcharts(testlegend, testdata);
			}
		},
		error : function() {
			initMainEcharts(testlegend, testdata);
		}
	});
}
	
function initMainEcharts(legend, data) {
	var mainEcharts = echarts.init(document.getElementById('mainEcharts'));
	mainEcharts.setOption({
		    tooltip: {
		        trigger: 'item',
		        formatter: "{a} <br/>{b}: {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        y: 'bottom',
		        data : legend
		    },
		    color : [ '#08d677', '#c23531','#2f4554','#61a0a8','#d48265','#946006','#337ab7','#555','#f3a5a5','#dff0d8'],
		    series : [
		        {
		            name: '设备型号分布',
		            type: 'pie',
		            radius : ['55%', '70%'],
		            data : data,
		            label: {
		                normal: {
		                    formatter: '{d}%\n{c}台',
		                    textStyle : {
		                        fontSize : 25
		                    }
		                }
		            },
		            labelLine: {
		                normal: {
		                    length : 20,
		                    length2 : 50
		                }
		            },
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
	});
	mainEcharts.on('click', function (params) {
	    if (params.componentType === 'series') {
	        if (params.seriesType === 'pie') {
	        	devCountByMonthWithProvince(params.name);
	        	devCountByAreaWithProvince(params.name);
	        }
	    }
	});
}
	
var rightEcharts1 = echarts.init(document.getElementById('rightEcharts1'));
rightEcharts1.setOption({
	backgroundColor: '#f4f2e3',
    title: {
    	x: 'left',
        y: 0,
        text: 'December',
        textStyle : {
            fontSize : 10
        }
    },
    grid : {
    	left : '1%',
    	top : '2%',
    	right : '1%',
    	bottom : '1%'
    },
    xAxis: {
        data: ['6', '8', '10', '12', '14', '16', '18', '20', '22', '24', '26'],
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        z: 10
    },
    yAxis: {
        axisLine : {
            show : false
        },
        axisTick : {
            show : false
        },
        axisLabel : {
            show : false
        }
    },
    series: [
        { // For shadow
            type: 'bar',
            itemStyle: {
                normal: {color: 'rgba(0,0,0,0.1)'}
            },
            barGap:'-100%',
            barCategoryGap:'40%',
            data: [500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500]
        },
        {
            type: 'bar',
            itemStyle: {
                normal: {
                    color: '#FF8C00'
                }
            },
            data: [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90]
        }
    ]
});

var rightPieOption = {
	backgroundColor: '#fff',
//	    title: {
//	        text: 'IN',
//	        left: 'center',
//	        top: 'bottom'
//	    },
    tooltip: {
        show: false,
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['65%', '80%'],
            label: {
                normal: {
                	position: 'center',
                    formatter: '$240k',
                    textStyle: {
                        fontSize: 10,
                        fontWeight : 'bold',
                        color: 'black'
                    }
                }
            },
            hoverAnimation: false,
            startAngle: 90,
            data: [{
                value: 20,
                name: '01',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'green' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'yellow' // 100% 处的颜色
                        }], false)
                    }
                }
            }, {
                value: 10,
                name: '01',
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0.1)',
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    },
                    emphasis: {
                        color: 'rgba(0,0,0,0.1)'
                    }
                }
            }, ]
        }

    ]
};

var option2 = {
		backgroundColor:['#f4f2e3'],
		xAxis: {
	        type: 'category',
	        boundaryGap: false,
	        data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15']
	    },
	    yAxis: {
	        type: 'value',
	    },
	    grid: {
 	        left: '0',
 	        right: '5%',
 	        bottom: '0',
 	        top: '10%',
 	        containLabel: true
 	    },
 	   	tooltip: {
	    	x:'right',
	        trigger: 'axis'
	    },
	    series: [
	             {
	                 name:'数量',
	                 type:'line',
	                 smooth: true,
	                 data:[200,180,220, 210, 224, 215, 150,215,280,200,220,110,120,110,200],
	             
	             }
	     ]
};

var rightEcharts2 = echarts.init(document.getElementById('rightEcharts2'));
rightEcharts2.setOption(option2);

var rightEcharts3 = echarts.init(document.getElementById('rightEcharts3'));
rightEcharts3.setOption({
	backgroundColor:'#f4f2e3',
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        y: 'bottom',
        data : ['珠海','广州','上海','北京','其他']
    },
    color : [ '#08d677', '#c23531','#2f4554','#61a0a8','#d48265','#946006','#337ab7','#555','#f3a5a5','#dff0d8'],
    series : [
        {
            name: '设备型号分布',
            type: 'pie',
            radius : ['55%', '70%'],
            data : [
                    {value:335, name:'珠海'},
                    {value:310, name:'广州'},
                    {value:234, name:'上海'},
                    {value:135, name:'北京'},
                    {value:1548, name:'其他'}
                ],
            label: {
                normal: {
                	show : false,
                	position: 'center',
                    formatter: '{d}%\n{c}台',
                    textStyle : {
                        fontSize : 25
                    }
                }
            },
            labelLine: {
                normal: {
                    show : false
                }
            },
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
});

//12各月各月新增设备
function devCountByMonth(){
	$.ajax({
		url : '<%=path%>/manage/devCountByMonth',
		data : { },
        type : 'post',
        dataType : 'json',
        async : false,	        
        success : function(result) {
        	if(result.status == 'OK') {
	        	var rig1xAxis = [], rig1seriesdata = [];
	        	$.each(result.data,function(i) {
	        		rig1xAxis.push(result.data[i].month);
	        		rig1seriesdata.push(result.data[i].count);
	        	});
	        	option2.xAxis.data = rig1xAxis;
	        	option2.series.data = rig1seriesdata;
	        	rightEcharts1.setOption({
	        		backgroundColor: '#f4f2e3',
	        	    title: {
	        	    	show : false
	        	    },
	        	    grid : {
	        	    	left : '8%',
	        	    	top : '5%',
	        	    	right : '1%',
	        	    	bottom : '10%'
	        	    },
	        	    tooltip: {
	        	        show: true
	        	    },
	        	    xAxis: {
	        	        data: rig1xAxis,
	        	        axisTick: {
	        	            show: true
	        	        },
	        	        axisLine: {
	        	            show: true
	        	        },
	        	        z: 10
	        	    },
	        	    yAxis: {
	        	        axisLine : {
	        	            show : true
	        	        },
	        	        axisTick : {
	        	            show : true
	        	        },
	        	        axisLabel : {
	        	            show : true
	        	        }
	        	    },
	        	    series: [
//		        	        { // For shadow
//		        	            type: 'bar',
//		        	            itemStyle: {
//		        	                normal: {color: 'rgba(0,0,0,0.1)'}
//		        	            },
//		        	            barGap:'-100%',
//		        	            barCategoryGap:'40%',
//		        	            data: [500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500]
//		        	        },
	        	        {
	        	            type: 'bar',
	        	            itemStyle: {
	        	                normal: {
	        	                    color: '#FF8C00'
	        	                }
	        	            },
	        	            data: rig1seriesdata
	        	        }
	        	    ]
	        	});
        	}
		},			
		error : function(result) {
			console.log('error');
        	console.log(result);
		}
	});	
}
//指定省份12月各月新增设备
function devCountByMonthWithProvince(province){
	$.ajax({
		url : '<%=path%>/manage/devCountByMonthWithProvince',
		data : { province : province },
        type : 'post',
        dataType : 'json',
        async : false,	        
        success : function(result) {
        	if(result.status == 'OK') {
	        	var rig2xAxis = [], rig2seriesdata = [];
	        	$.each(result.data,function(i) {
	        		rig2xAxis.push(result.data[i].month);
	        		rig2seriesdata.push(result.data[i].count);
	        	});
	        	option2.xAxis.data = rig2xAxis;
	        	option2.series.data = rig2seriesdata;
	        	rightEcharts2.setOption({
		    			backgroundColor:'#f4f2e3',
		    			xAxis: {
		    		        type: 'category',
		    		        boundaryGap: false,
		    		        data: rig2xAxis
		    		    },
		    		    yAxis: {
		    		        type: 'value',
		    		    },
		    		    grid: {
		    	 	        left: '3%',
		    	 	        right: '1%',
		    	 	        bottom: '5%',
		    	 	        top: '10%',
		    	 	        containLabel: true
		    	 	    },
		    	 	   	tooltip: {
		    		    	x:'right',
		    		        trigger: 'axis'
		    		    },
		    		    series: [
		    		             {
		    		                 name:'数量',
		    		                 type:'line',
		    		                 smooth: true,
		    		                 data:rig2seriesdata,
		    		             
		    		             }
		    		     ]
		    	});
        	}
		},			
		error : function(result) {
			console.log('error');
        	console.log(result);
		}
	});	
}
//指定省份各地设备
function devCountByAreaWithProvince(province){
	$.ajax({
		url : '<%=path%>/manage/devCountByAreaWithProvince',
		data : { province : province },
        type : 'post',
        dataType : 'json',
        async : false,	        
        success : function(result) {
        	console.log('success:');
        	console.log(result);
        	if(result.status == 'OK') {
	        	var rig2xAxis = [], rig2seriesdata = [];
	        	$.each(result.data,function(i) {
	        		rig2xAxis.push(result.data[i].cityArea);
	        		rig2seriesdata.push(
	        				{value:result.data[i].count, name:result.data[i].cityArea}
	        		);
	        	});
	        	option2.xAxis.data = rig2xAxis;
	        	option2.series.data = rig2seriesdata;
	        	rightEcharts3.setOption({
	        		backgroundColor:'#f4f2e3',
	    		    tooltip: {
	    		        trigger: 'item',
	    		        formatter: "{a} <br/>{b}: {c} ({d}%)"
	    		    },
	    		    legend: {
	    		        orient: 'vertical',
	    		        x: 'left',
	    		        y: 'bottom',
	    		        data : rig2xAxis
	    		    },
	    		    color : [ '#08d677', '#c23531','#2f4554','#61a0a8','#d48265','#946006','#337ab7','#555','#f3a5a5','#dff0d8'],
	    		    series : [
	    		        {
	    		            name: '设备型号分布',
	    		            type: 'pie',
	    		            radius : ['55%', '70%'],
	    		            data : rig2seriesdata,
	    		            label: {
	    		                normal: {
	    		                	show : false,
	    		                	position: 'center',
	    		                    formatter: '{d}%\n{c}台',
	    		                    textStyle : {
	    		                        fontSize : 25
	    		                    }
	    		                }
	    		            },
	    		            labelLine: {
	    		                normal: {
	    		                    show : false
	    		                }
	    		            },
	    		            itemStyle: {
	    		                emphasis: {
	    		                    shadowBlur: 10,
	    		                    shadowOffsetX: 0,
	    		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	    		                }
	    		            }
	    		        }
	    		    ]
	    	});
        	}
		},			
		error : function(result) {
			console.log('error');
        	console.log(result);
		}
	});	
}
</script>
</html>